import * as echarts from "echarts";

var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom, null, {
  renderer: "svg",
});
var option;

const labelOption = {
  show: true,
  position: "right",
  offset: [-100, 0],
  formatter: "{Sunny|} {title|sss呃呃呃} {c}  {name|{a}}",
  // backgroundColor:'#f0f',
  fontSize: 16,
  rich: {
    title: { color: "#f00" },
    Sunny: {
      height: 30,
      width: 30,
      align: "center",
      backgroundColor: {
        image:
          "https://img.zcool.cn/community/014e1759e6c723a80121bea58d4ac1.gif",
      },
    },
  },
};
option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["Forest", "Steppe", "Desert", "Wetland"],
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "right",
    top: "center",
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar", "stack"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  xAxis: [
    {
      type: "value",
    },
  ],
  yAxis: [
    {
      type: "category",
      axisTick: { show: false },
      data: ["2012", "2013", "2014", "2015", "2016"],
    },
  ],
  series: [
    {
      name: "Forest",
      type: "bar",
      barGap: 0,
      label: labelOption,
      barMaxWidth: 20,
      emphasis: {
        focus: "series",
      },
      data: [320, 332, 301, 334, 390],
    },
  ],
};

option && myChart.setOption(option);
